
<template>
  <div class="exam-records">
    <div class="header-section">
      <div class="search-box">
        <input
            type="text"
            v-model="searchKeyword"
            placeholder="请输入监考名称关键词查询"
            class="search-input"
        >
        <button class="search-btn" @click="searchRecords">
          <span>查询</span>
        </button>
      </div>
    </div>

    <div class="records-table">
      <table>
        <thead>
        <tr>
          <th>序号</th>
          <th>监考批次</th>
          <th>报名结束时间</th>
          <th>是否确认</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(record, index) in paginatedRecords" :key="record.id">
          <td>{{ (currentPage - 1) * pageSize + index + 1 }}</td>
          <td>{{ record.batch }}</td>
          <td>{{ formatDate(record.signupEnd) }}</td>
          <td>
            <span :class="getConfirmationClass(record.confirmed)">
              {{ record.confirmed ? '已确认' : '未确认' }}
            </span>
          </td>
          <td>
            <button
                class="action-btn view-btn"
                @click="viewRecordDetails(record)"
            >
              查看
            </button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="pagination-section">
      <div class="pagination">
        <button
            v-for="page in totalPages"
            :key="page"
            :class="['page-btn', { active: page === currentPage }]"
            @click="currentPage = page"
        >
          {{ page }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 监考记录数据结构
interface ExamRecord {
  id: number;
  batch: string;
  signupEnd: string;
  confirmed: boolean;
}

// 搜索关键词
const searchKeyword = ref('');

// 分页相关变量
const currentPage = ref(1);
const pageSize = 10;

// 模拟监考记录数据
const examRecords = ref<ExamRecord[]>([
  { id: 1, batch: '2023年6月期末考试-高等数学', signupEnd: '2023-05-15', confirmed: true },
  { id: 2, batch: '2023年6月期末考试-英语', signupEnd: '2023-05-15', confirmed: true },
  { id: 3, batch: '2023年9月补考-数据结构', signupEnd: '2023-08-25', confirmed: false },
  { id: 4, batch: '2023年9月补考-计算机网络', signupEnd: '2023-08-25', confirmed: true },
  { id: 5, batch: '2023年12月四六级考试-英语四级', signupEnd: '2023-11-20', confirmed: true },
  { id: 6, batch: '2023年12月四六级考试-英语六级', signupEnd: '2023-11-20', confirmed: false },
  { id: 7, batch: '2024年1月期末考试-高等数学', signupEnd: '2023-12-15', confirmed: true },
  { id: 8, batch: '2024年1月期末考试-线性代数', signupEnd: '2023-12-15', confirmed: true },
  { id: 9, batch: '2024年3月补考-计算机基础', signupEnd: '2024-02-20', confirmed: false },
  { id: 10, batch: '2024年3月补考-大学物理', signupEnd: '2024-02-20', confirmed: true },
  { id: 11, batch: '2024年5月期中考试-高等数学', signupEnd: '2024-04-10', confirmed: true },
  { id: 12, batch: '2024年5月期中考试-英语', signupEnd: '2024-04-10', confirmed: false },
]);

// 过滤后的记录
const filteredRecords = computed(() => {
  if (!searchKeyword.value) return examRecords.value;

  const keyword = searchKeyword.value.toLowerCase();
  return examRecords.value.filter(record =>
      record.batch.toLowerCase().includes(keyword)
  );
});

// 分页相关计算
const totalPages = computed(() => {
  return Math.ceil(filteredRecords.value.length / pageSize);
});

const paginatedRecords = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return filteredRecords.value.slice(start, end);
});

// 确认状态样式
const getConfirmationClass = (confirmed: boolean) => {
  return confirmed ? 'status-confirmed' : 'status-pending';
};

// 日期格式化
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

// 查看记录详情
const viewRecordDetails = (record: ExamRecord) => {
  router.push({
    name: 'ExamRecordDetail',
    params: { id: record.id }
  });
};

const searchRecords = () => {
  currentPage.value = 1; // 搜索后重置到第一页
};
</script>

<style scoped>
.exam-records {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 25px;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 400px;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  height: 40px;
  border-right: none;
}

.search-btn {
  background-color: #1a3a6c;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  padding: 0 20px;
  height: 40px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #2c5282;
}

.records-table {
  margin-bottom: 20px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

th {
  background-color: #f8fafc;
  color: #1a2b4b;
  font-weight: 600;
}

tr:hover {
  background-color: #f8fafc;
}

.status-confirmed {
  color: #2e7d32;
  font-weight: 500;
}

.status-pending {
  color: #f57f17;
  font-weight: 500;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 5px;
}

.view-btn {
  background-color: transparent;
  border: 1px solid #1a3a6c;
  color: #1a3a6c;
}

.view-btn:hover {
  background-color: #1a3a6c;
  color: white;
}

.pagination-section {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.pagination {
  display: flex;
  gap: 5px;
}

.page-btn {
  padding: 6px 12px;
  background-color: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-btn:hover {
  background-color: #f0f2f5;
}

.page-btn.active {
  background-color: #1a3a6c;
  color: white;
  border-color: #1a3a6c;
}
</style>
